<template>
    <div class="logo_wrap">
        <div class="form_wrap">
            <el-form ref="formRef" style="max-width: 600px" :model="loginData" label-width="100px" class="demo-dynamic">
                <el-form-item prop="userName" label="用户名" :rules="[
                    {
                        required: true,
                        message: '请输入用户名！',
                        trigger: 'blur',
                    },
                ]">
                    <el-input v-model="loginData.userName" />
                </el-form-item>

                <el-form-item prop="password" label="密码" :rules="[
                    {
                        required: true,
                        message: '请输入密码！',
                        trigger: 'blur',
                    },
                ]">
                    <el-input type="password" v-model="loginData.password" />
                </el-form-item>
                <!-- <div>{{ count }}</div> -->
                <el-form-item>
                    <el-button type="primary" @click="handeLogin">
                        提交
                    </el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import { reactive, toRefs,onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { loginApi } from '@/utils/request';


export default {
    name: "login",
    setup() {
        const store = useStore()
        const router = useRouter()
        const formRef = toRefs(null);
        const data = reactive({
            loginData: {
                userName: "",
                password: ""
            },

        })

        const handeLogin = () => {
            loginApi(data.loginData).then(res=>{
                console.info("res:",res)
            
                console.info(data.loginData)
                localStorage.setItem("loginData", JSON.stringify(data.loginData))
                store.commit('user/setUserInfo', data.loginData);
                console.info(store.getters["user/getUserInfo"])
                router.push({
                    path: "/index"
                })
            })

        }
        const checkLogin = () => {
            const userInfo = store.state.user.userInfo
            console.info("1",userInfo)
            if (userInfo && userInfo.userName) {
                console.info("2",userInfo)
                router.push({
                    path: "/index"
                })
            }
        }

        const resetForm = (formEl) => {
            console.info("formEl",formEl)
            if (!formEl) return
            formEl.resetFields()
        }
        onMounted(()=>{
            console.info("test")
            checkLogin()
        })
        // setTimeout(()=>{
        //     console.info("自动登录")
        //     checkLogin()
        // },2000)

        return {
            ...toRefs(data),
            handeLogin,
            resetForm,
            checkLogin,
            formRef
        }


    }
}
</script>
<style scoped>
.logo_wrap {
    width: 100%;
    height: 100vh;
    background-color: dodgerblue;
    position: relative;
}

.form_wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 30px 50px;
    border-radius: 5px;

}
</style>